---
title: Link
---

# Link

```js
import { Link } from 'theme-ui'
```

```jsx live=true
<Link href="#!">Hello</Link>
```

## Variants

Link variants can be defined in the `theme.links` object.
By default the Link component will use styles defined in `theme.styles.a`.

```js
// example theme variants
{
  links: {
    bold: {
      fontWeight: 'bold',
    },
    nav: {
      fontWeight: 'bold',
      color: 'inherit',
      textDecoration: 'none',
    }
  }
}
```
